{% block css %}
<style>
  .image-container {
    position: relative;
    width: 256px; /* 调整容器宽度 */
    height: 175px; /* 调整容器高度 */
  }
  
  /* 图片元素 */
  .image-container img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; /* 根据容器尺寸裁剪/缩放图片 */
  }
  
  /* 无法显示图片时的背景块 */
  .image-container .fallback-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #5e889e; /* 设置背景颜色 */
      display: flex;
      justify-content: center; /* 文字水平居中 */
      align-items: center; /* 文字垂直居中 */
      color: #fff; /* 文字颜色 */
      font-size: 18px; /* 文字大小 */
  }
</style>
{% endblock css %}

<div class='con-list-item flex-row-between align-items-start'>
  <div class="image-container">
    <img src="https://os-image-bj-1258514725.cos.ap-beijing.myqcloud.com/media/WechatIMG919.jpeg" width='256' height='175' />
    <div class="fallback-text">{{model.experiment_name}}</div>
  </div>
  <div class='item-con'>
    <div class='item-name'>
      {{model.experiment_name}}
    </div>
    <div class='item-desc show-html'>
    {% load markdownify %}
      {% autoescape off %}
      {{model.intro|markdownify}}
      {% endautoescape %}
    </div>
  </div>
  <div class='item-ope'>
    <div class='item-student-count'>
      <img width="27" height="27" src='/ttpstatic/study/images/user47.png' />
      <span>{{model.student_count}}人</span>
    </div>
    {% if user.is_authenticated and model.course.choiced %}
      <span onclick=goUrl("{% url 'study:experimenting' pk=model.id%}") class="btn-long">进行实验</span>
    {% else %}
      <span onclick=goUrl("{% url 'study:experimenting' pk=model.id%}")  class="btn-long">进行实验</span>
    {% endif %}
  </div>
  {% if needTip %}
    <span class="con-list-tip">实验</span>
  {% endif %}
</div>